<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过度案例_Vue实现</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
			.picture{
				width: 100px;
			}

			/* 离开的起点，进入的终点 */
			.qiuku-leave,.qiuku-enter-to{
				opacity: 1;
				transform: scale(1) rotate(0deg);
			}
			/* 离开的终点,进入的起点 */
			.qiuku-leave-to,.qiuku-enter{
				opacity: 0;
				transform: scale(0.2) rotate(180deg);
			}
			/* 离开中,进入中 */
			.qiuku-leave-active,.qiuku-enter-active{
				transition: 1s all linear;
			}

		</style>
	</head>
	<body>
		<!--
				1. 基本编码
						(1).在目标元素外包裹<transition name="xxx">
						(2).编写样式：
										进入：
											进入起始点(xxx-enter)、
											进入过程中(xxx-enter-active)、
											进入结束点 的样式(xxx-enter-to)
										离开:
											离开起始点(xxx-leave)、
											离开过程中(xxx-leave-active)、
											离开结束点 的样式(xxx-leave-to)
		-->
		<div id="root">
			<button @click="isShow = !isShow">切换</button> <br/>

			<transition name="qiuku">
				<img v-show="isShow" class="picture" src="https://s3.ax1x.com/2020/12/13/reCaqg.jpg" >
				<div v-show="isShow"></div>
			</transition>

		</div>

		<script type="text/javascript" >
			new Vue({
				el:'#root',
				data:{
					isShow:true
				}
			})
		</script>
	</body>
</html>